<template>
	<view class="user-date">
		<view class="dropdown flexR">
			<view class="dropdown-left flexR" @click="handleMenu('user')" v-if="showUser">
				<text class="iconfont icon-xinzengyonghu"></text>
				<text class="name">{{userInfo.name}}</text>
				<view class="uIcon" :style="{transform:userIcon==='arrow-up'?'rotate(180deg)':'rotate(0deg)',transition:'transform .3s'}">
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="dropdown-right flexR" @click="handleMenu('date')" v-show="showDate">
				<text>{{currDate}}</text>
				<view class="uIcon" :style="{transform:dateIcon==='arrow-up'?'rotate(180deg)':'rotate(0deg)',transition:'transform .3s'}">
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
		</view>
		<view class="menu-content">
			<view v-show="dateIcon==='arrow-up'" class="u-content-color u-border-top flexR" v-for="(item,i) in dateOptions" @click="change(item,'date')">
				<text :style="{color:item.checked?'#31CADF':''}">{{item.label}}</text>
				<u-icon name="checkbox-mark" :color="item.checked?'#31CADF':'#FFF'"></u-icon>
			</view>
			<view v-show="userIcon==='arrow-up'" class="u-content-color u-border-top flexR" v-for="(item,i) in userOptions" @click="change(item,'user')">
				<text :style="{color:item.checked?'#31CADF':''}">{{item.label}}</text>
				<u-icon name="checkbox-mark" :color="item.checked?'#31CADF':'#FFF'"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import dayjs from 'dayjs'
	export default {
		props:{
			color:{
				type:String,
				default:'#fff'
			},
			showDate:{
				type:Boolean,
				default:true
			},
			showUser:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				dateOptions:[
					{
						label:'一周内',
						value:1,
						type:'week',
						number:1,
						checked:true
					},
					{
						label:'一月内',
						value:2,
						type:'month',
						checked:false,
						number:1
					},
					{
						label:'半年内',
						value:3,
						type:'month',
						checked:false,
						number:6
					},
					{
						label:'一年内',
						value:4,
						type:'year',
						checked:false,
						number:1
					},
					{
						label:'不限时间',
						value:5,
						checked:false,
						type:'all'
					}
				],
				userIcon:'arrow-down',
				dateIcon:'arrow-down',
				currDate:'一周内',
			}
		},
		computed:{
			...mapGetters(['userInfo','userList']),
			userOptions(){
				let res = []
				this.userList.forEach(item => {
					res.push({
						label:`${item.name} (${item.cardNo})`,
						value:item.patId,
						checked:item.loginStatus===1?true:false
					})
				})
				return res;
			}
		},
		methods: {
			...mapActions(['changeUser']),
			change(val,type){
				if(type==='date'){
					this.dateOptions.forEach(item => {
						item.checked = item.value===val.value?true:false;
					})
					this.currDate = val.label
					this.dateIcon = 'arrow-down'
					let params = {
						endDate:'',
						startDate:''
					}
					if(val.type==='all'){
						params.startDate = '2017-01-01';
					}else{
						params.startDate = dayjs().subtract(val.number, val.type).format('YYYY-MM-DD');
					}
					params.endDate = dayjs().format('YYYY-MM-DD');
					this.$emit('changeDate',params)
				}else{
					this.userIcon = 'arrow-down'
					let this_ = this;
					this.changeUser(val.value).then(()=> {
						this_.$emit('changeUser')
					})
				}
			},
			handleMenu(type){
				if(type === 'user'){
					this.dateIcon = 'arrow-down'
					if(this.userIcon === 'arrow-up'){
						this.userIcon = 'arrow-down'
					}else{
						this.userIcon = 'arrow-up'
					}
				}else{
					this.userIcon = 'arrow-down'
					if(this.dateIcon === 'arrow-up'){
						this.dateIcon = 'arrow-down'
					}else{
						this.dateIcon = 'arrow-up'
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-date{
		height: 80rpx;
		padding: 0 30rpx;
		color: #fff;
		position: relative;
		.dropdown{
			height: 100%;
			justify-content: space-between;
			align-items: center;
			&-left{
				align-items: center;
				.iconfont{
					font-size: 24px;
					margin-right: 10rpx;
				}
				.name{
					font-size: 32rpx;
				}
				.uIcon{
					margin-left: 16rpx;
				}
			}
			&-right{
				padding: 3px 5px;
				border: 1px solid #fff;
				border-radius: 3px;
				align-items: center;
				.uIcon{
					margin-left: 30rpx;
				}
			}
		}
		.menu-content{
			z-index: 3;
			position: absolute;
			left: 0;
			top: 80rpx;
			width: 100%;
			background-color: #FFF;
			box-shadow: 3px 3px 3px rgba($color: #000000, $alpha: .2);
			>view{
				height: 80rpx;
				padding: 0 30rpx;
				margin: 0 20rpx;
				justify-content: space-between;
				align-items: center;
				>text{
					line-height: 80rpx;
				}
			}
		}
		background-color: $theme-color-light;
	}
</style>
